<template>
  <div class="login">
    <div class="container">
      <ul class="login-form">
        <li class="login-option van-hairline--surround">
          <img src="@assets/images/icon_user.png" alt="" />
          <van-field v-model.trim="nickname" maxlength="10" clearable placeholder="请输入您的姓名" />
        </li>
        <li class="login-option van-hairline--surround">
          <img src="@assets/images/icon_company.png" alt="" />
          <van-field v-model.trim="company" maxlength="30" clearable placeholder="请输入您公司的全称" />
        </li>
        <template v-if="noPhone">
          <li class="login-option van-hairline--surround">
            <img src="@assets/images/icon_phone.png" alt="" />
            <van-field v-model.trim="phone" type="tel" maxlength="11" clearable placeholder="请输入您的手机号码" />
          </li>
          <li class="login-option van-hairline--surround">
            <van-field v-model.trim="smsCode" maxlength="6" type="number" clearable placeholder="请输入验证码">
              <template #button>
                <SmsBtn color="#FE9100" plain size="small" :border="false" :phone="phone" />
              </template>
            </van-field>
          </li>
        </template>
        <li class="login-option van-hairline--surround">
          <span class="desc">职位:</span>
          <ul class="identityType-list">
            <li :class="['van-hairline--surround', identityType === item.type ? 'active' : '']" v-for="(item, index) in dutyList" :key="index" @click="chooseDuty(item.type)">{{ item.text }}</li>
          </ul>
        </li>
      </ul>
      <van-button color="#FE9100" block round class="login-btn" @click="handleFormVerify" :disabled="btnDisabled">提交</van-button>
      <div class="qrcode">
        <img src="@assets/images/qrcode.jpeg" alt="" />
        <p>长安二维码，关注公众号</p>
      </div>
    </div>
  </div>
</template>

<script>
import { login_saveUserInfo, login_getUserIdByOpenId } from '@api/user.js';
import SmsBtn from '@components/smsBtn';
import { Field, Button, Toast } from 'vant';
import { mapState, mapGetters } from 'vuex';
export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    SmsBtn
  },
  data() {
    return {
      noPhone: true,
      phone: '',
      nickname: '',
      company: '',
      smsCode: '',
      identityType: '',
      btnDisabled: false
    };
  },
  computed: {
    ...mapGetters(['dutyList'])
  },
  mounted() {
    this.isHasPhone();
  },
  methods: {
    chooseDuty(type) {
      this.identityType = type;
    },
    async isHasPhone() {
      const { openId } = this.$store.state;
      let res = await login_getUserIdByOpenId({ openId });
      if (res.code === 200 && res.data) {
        this.noPhone = false;
      }
    },
    async handleFormVerify() {
      const { phone, nickname, company, smsCode, identityType, noPhone } = this;
      const { openId } = this.$store.state;
      if (!nickname) {
        Toast('请输入您的姓名');
      } else if (!company) {
        Toast('请输入您公司的全称');
      } else if (!/^1[3456789]\d{9}$/.test(phone) && noPhone) {
        Toast('请输入正确的手机号');
      } else if (!smsCode && noPhone) {
        Toast('请输入验证码');
      } else if (!identityType) {
        Toast('请选择身份');
      } else {
        this.btnDisabled = true;
        let res = await login_saveUserInfo({ openId, phone, nickname, company, smsCode, identityType });
        if (res.code === 200) {
          Toast('完善信息成功');
          setTimeout(() => {
            if (window.history.length <= 1) {
              this.$router.openPage('/service');
            } else {
              this.$router.go(-1);
            }
          }, 1000);
        } else {
          this.btnDisabled = false;
          Toast(res.msg);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  background: url('../../assets/images/login_bg.png') no-repeat top;
  background-size: contain;
  padding: 275px 32px 0;
  box-sizing: border-box;
  .container {
    padding: 40px 32px;
    background: #fff;
    box-shadow: 0px 5px 22px 0px rgba(41, 47, 61, 0.1);
    border-radius: 18px;
    box-sizing: border-box;
  }
}
.login-option {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 20px 0 40px;
  margin-bottom: 30px;
  font-size: 24px;
  .desc {
    flex: 0 0 60px;
    width: 60px;
  }
  &:after {
    border-radius: 36px;
  }
  img {
    height: 26px;
    margin-right: 16px;
  }
  .van-cell {
    flex: 1;
    padding: 0;
    box-sizing: border-box;
  }
  .identityType-list {
    display: flex;
    align-items: center;
    margin-left: 16px;
    li {
      width: 108px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #596880;
      margin-right: 20px;
      border-radius: 6px;
      &:after {
        border-radius: 12px;
      }
      &.active {
        background: #fe9100;
        color: #fff;
        &:after {
          border-color: #fe9100;
        }
      }
    }
  }
}
.login-btn {
  height: 80px;
  line-height: 80px;
  margin-top: 46px;
  font-weight: bold;
}
.qrcode {
  overflow: hidden;
  text-align: center;
  font-size: 26px;
  color: #242932;
  img {
    width: 218px;
    height: 218px;
    margin: 36px 0;
  }
}
</style>
